<template>
	<view class="content">
		<view class="fixed-layout">
			<!-- 排序标签 -->
			<view class="list-sort-bar posts-sort">
				<!-- <button class="sort-button selected">活动详情</button>
				<button class="sort-button">活动评价</button> -->
				<h-com-tab :tabName="style.TabName"></h-com-tab>
			</view>
		</view>
		<!-- 浮动顶栏位置补偿 -->
		<view class="filler-block half"></view>
		<!-- 顶图 -->
		<!-- <view class="top-slider">
			<image src="../../static/temp-photo-02.png" mode="widthFix"></image>
		</view> -->
		<!-- 活动详情 -->
		<view class="activity-detail-content">
			<view class="detail-content">
				<!-- <text class="content-title">活动描述</text> -->
				<!-- 帖子内容 -->
			<!-- 	<text class="quote-text"># 布局的传统解决方案 #</text>，基于盒状模型，
				<icon type="" class="imgIcon icon-store" />依赖 display属性 + position属性 + float属性。
				它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
				<text class="content-title">活动图片</text> -->
				<!-- 详情中的单个运用的图片尽量放大 -->
				<!-- <image @click="" src="../../static/temp-photo.jpg" mode="widthFix" class="full-img"></image>
				<image src="../../static/temp-photo-02.png" mode="widthFix" class="full-img"></image> -->
				<!-- 九宫格图片 -->
			<!-- 	<view class="img-grid tetrad">
					<image @click="" src="../../static/temp-photo.jpg" mode="widthFix"></image>
					<image @click="" src="../../static/temp-photo.jpg" mode="widthFix"></image>
					<image @click="" src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view> -->
				<!-- 引用卡片 -->
				<!-- <view class="quote-card" @click=""> -->
					<!-- 预览图,去掉后，剩余内容自动充满 -->
					<!-- <view class="cigar-logo">
						<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
						<view class="corner-sign year"></view> 
						<view class="corner-sign area"></view>
					</view> -->
					<!-- 引用内容 -->
					<view class="quote-content">
						<!-- 雪茄英文名 -->
						<!-- <text class="cigar-en-name">Ramon Allones Specially Selected</text> -->
						<!-- 雪茄中文名 -->
						<!-- <text class="cigar-cn-name">莱蒙特选</text> -->
						<!-- 间隔线 -->
						<!-- <view class="spacing-line"></view> -->
						<!-- 五星 -->
						<!-- <view class="five-star">
							<uni-rate size="16" :touchable="false" :value="3.5" allow-half :readonly="true" />3.5
						</view> -->
						<!-- 引用雪茄数据 -->
						<!-- <view class="quote-content-detail quote-cigar-content-detail">
							<view>
								<text>发布年份：</text>
								<text>2001</text>
							</view>
							<view>
								<text>发布地区：</text>
								<text>中国四川石方中国四川石方中国四川石方</text>
							</view>
						</view> -->
					</view>
				</view>
			</view>
			<image :src="image" mode="widthFix" class="full-img"></image>
		</view>

		<!-- 评论区 -->
		<view class="content-comment">
			<!-- 评论头部 -->
			<view class="comment-head">
				<text class="comment-title">所有评论</text>
				<view class="comment-sort">
					<button class="sort-button selected">最热</button>
					<button class="sort-button">最新</button>
				</view>
			</view>
			<!-- 评论列表 -->
			<view class="comment-list">
				<view class="content-empty empty-comment-bg">
					评论空空，期待你的留言
				</view>
				<!-- 列表项目 -->
				<view class="comment-list-item">
					<!-- 用户信息 -->
					<view class="account-info vip">
						<!-- 用户头像 -->
						<view class="account-head">
							<!-- 头像图片容器 -->
							<view class="account-head-img">
								<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
							</view>
							<!--头像帽子 训：hat-admin｜鉴赏家：hat-appreciation｜坏人：hat-badman｜美女：hat-beautiful｜皇冠：hat-crown｜女生翅膀：hat-girlWing -->
							<icon type="" class="account-hat hat-appreciation"></icon>
						</view>
						<!-- 文字和图标信息 -->
						<view class="account-info-content">
							<!-- 基础信息 -->
							<view class="base-info">
								<text class="account-nickName">用户名甲乙丙丁戊己</text>
								<text class="writer-sign">作者</text>
								<view class="account-level"><text>999</text></view>
								<!-- 男性 -->
								<icon type="" class="imgIcon icon-male"></icon>
								<!-- 女性 -->
								<icon type="" class="imgIcon icon-female"></icon>
							</view>
							<!-- 附加信息 -->
							<view class="plus-info">
								<!-- VIP铭牌 -->
								<text class="account-nameplate">22</text>
								<!-- SVIP铭牌 -->
								<!-- <text class="account-nameplate">22</text> -->
								<!-- 店铺 -->
								<icon type="" class="imgIcon icon-store"></icon>
								<!-- 品牌 -->
								<icon type="" class="imgIcon icon-brand"></icon>
								<!-- 认证 -->
								<icon type="" class="imgIcon icon-tobacco"></icon>
								<!-- 鉴赏家 -->
								<icon type="" class="imgIcon icon-evaluation"></icon>
							</view>
							<!-- 时间 -->
							<view class="time-info">
								<text>2019-11-12 10:21:10</text>
							</view>
						</view>
						<!-- 功能 -->
						<view class="post-head-actions">
							<!-- 帖子点赞 -->
							<!-- 自己已经点赞过就加样式thumbs-selected，如果取消点赞，就去掉这个样式 -->
							<!-- 没有人点赞过数字为空就可以 -->
							<!-- 数字位数不能超过3个，如果超过，显示+ -->
							<view class="wrap-thumbs thumbs-selected">
								<icon type="" class="fontIcon icon-thumbs"></icon>
								<text class="like-number">999+</text>
							</view>
						</view>
					</view>
					<!-- 评论内容 -->
					<view class="comment-item-content">
						<text>店里环境非常好，唱歌气氛非常嗨，极力推荐啊！！！</text>
						<view class="img-grid tetrad">
							<image @click="" src="../../static/temp-photo.jpg" mode="widthFix"></image>
							<image @click="" src="../../static/temp-photo.jpg" mode="widthFix"></image>
							<image @click="" src="../../static/temp-photo.jpg" mode="widthFix"></image>
						</view>
						<button class="comment-item-more">还有2条回复 &gt;</button>
					</view>
				</view>
			</view>
			<view class="noMore-content">
				- 没有个更多评论了 -
			</view>
			<view class="loading-content">
				正在加载...
			</view>
		</view>
		<!-- 浮动底栏位置补偿 -->
		<view class="filler-block"></view>
		<!-- ***菜单*** -->
		<view class="footBar foot-menu-content">
			<!-- 竖排按钮组 -->
			<view class="buttons-content-columns">
				<!-- 如无需此功能，马上参加可以改为前往APP查看 -->
				<button class="full-btn btn-important">马上参加</button>
				<button class="common-btn btn-normal"><icon type="" class="fontIcon icon-share"/></button>
			</view>
		</view>
	
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref,reactive } from 'vue';
	let indicatorDots = ref(false)
	let interval = ref(2000)
	let duration = ref(500)
	let autoplay = ref(true)
	let image = ref('asd')
	// let background = ref(['color1', 'color2', 'color3'])
  const	changeIndicatorDots=(e)=> {
		console.log('this.indicatorDots',this.indicatorDots)
	    // this.indicatorDots = !this.indicatorDots
	}
	const changeAutoplay=()=>{
	    // this.autoplay = !this.autoplay
	}
	const	intervalChange=(e)=> {
	    // this.interval = e.target.value
	}
	const	durationChange=(e)=> {
	    // this.duration = e.target.value
	}
	const style = reactive({
		bool:false,
		TabName: [{
				id: 0,
				name: '活动详情',
				bool: true
	
			},
			{
				id: 1,
				name: '活动评论',
				bool: false
			},
		],
		brandType:''
	})
	onLoad((options)=>{
		console.log('options',options)
		image = options.imgUrl
		console.log(image)
	})
	
</script>
